<template>
	<view class="container hideToShow">
		<view class="container_top">
			<view class="card">
				<view class="card_Avatar"><image src="/static/images/common/avatar.png" mode="aspectFill"></image></view>
				<view class="card_info">
					<text>公司名称：{{ user.c_name }}</text>
					<text>联系邮箱：{{ user.email }}</text>
					<view class="card_area">
						<text class="text-omit">注册地址：{{ user.reg_address }}</text>
						<text class="icon icon-jinrujiantou" @tap="jump()"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="container_bottom">
			<!-- 管理模块 -->
			<view class="manage">
				<view class="manage_title"><text>管理模块</text></view>
				<view class="manage_list">
					<view class="manage_item" v-for="(item, index) in manageList" :key="index" @tap="routerJump(item)">
						<image :src="item.src" mode="aspectFill"></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 退出登录按钮 -->
		<view class="float"><button class="float-btn" type="default" @tap="loginOut()">退出登录</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: {},
			manageList: [
				{
					text: '管理模块',
					src: 'https://grid.nnkcy.com/static/images/common/md.png'
				}
			]
		};
	},
	onLoad() {
		this.user = uni.getStorageSync('user');
	},
	methods: {
		// 退出登录
		loginOut() {
			uni.showActionSheet({
				itemList: ['确认退出'],
				success: res => {
					let idx = res.tapIndex;
					if (idx === 0) {
						uni.reLaunch({ url: '../user/login' });
					}
				}
			});
		},
		jump() {
			uni.navigateTo({
				url: `/pages/company/index?id=${this.user._id}`
			});
		},
		routerJump(item) {
			this.$until.showToast('敬请期待');
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	width: 100%;
	overflow: hidden;
	min-height: 100vh;
	background-color: #fff;

	.container_top {
		padding: 48rpx 32rpx;
		background-color: #04d48e;

		.card {
			display: flex;
			padding: 32rpx 24rpx;
			border-radius: 10rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 0px 26rpx #00000021;

			.card_Avatar {
				width: 110rpx;
				height: 110rpx;
				margin-right: 20rpx;
				flex-shrink: 0;

				> image {
					width: 100%;
					height: 100%;
				}
			}

			.card_info {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				height: 114rpx;
				justify-content: space-between;

				.card_name {
					font-size: 32rpx;
				}

				text {
					font-size: 24rpx;
				}

				.card_area {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.icon-jinrujiantou {
						color: #04d48e;
						font-size: 35rpx;
						margin-left: 24rpx;
					}
				}
			}
		}
	}

	.container_bottom {
		display: flex;
		overflow: hidden;
		flex-direction: column;
		background-color: #f7f7f7;
		justify-content: space-between;

		.manage {
			width: 100%;
			margin-top: 32rpx;
			background-color: #fff;

			.manage_title {
				padding: 25rpx 0rpx;
				box-sizing: border-box;

				> text {
					border-left: 8rpx solid #04d48e;
					padding-left: 30rpx;
					font-weight: bold;
					font-size: 30rpx;
				}
			}

			.manage_list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.manage_item {
					padding: 25rpx 0rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 251rpx;

					> image {
						width: 82rpx;
						height: 82rpx;
						margin-bottom: 15rpx;
					}

					> text {
						font-size: 24rpx;
					}
				}
			}
		}
	}
	.float {
		left: 0;
		right: 0;
		width: 90%;
		margin: auto;
		height: 85rpx;
		position: fixed;
		bottom: calc(var(--window-bottom) + 42rpx);

		&-btn {
			color: #fff;
			height: 100%;
			font-size: 30rpx;
			border-radius: 42rpx;
			background-color: #04d48e;
		}
	}
}
</style>
